<template>
  <div>
    <!-- 导航 -->
    <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<span :class="['mui-control-item',item.id==0?'mui-active':'']" 
            v-for="item in category" :key="item.id" @click="getPhotoByCategory(item.id)">
							{{item.title}}
						</span>
					</div>
				</div>
			</div>

      <!-- 图片列表 -->
      <ul class="lazyul">
        <router-link tag="li" v-for="item in photos" :key="item.id" :to="'/home/photoinfo/' + item.id">
          <img v-lazy="item.img_url">
          <div class="info">
            <h1 class="info-title">{{item.title}}</h1>
            <div class="info-content">{{item.zhaiyao}}</div>
          </div>
        </router-link>
      </ul>

  </div>
</template>

<script>
//导入mui的JS文件，这样可以使用mui初始化滑动控件
//webpack打包的bundle文件默认开启严格模式
//导入的mui.js使用了callee caller等特性，在严格模式下不支持
//安装插件 babel-plugin-transform-remove-strict-mode
import mui from "../../../lib/mui/js/mui.js";

export default {
  data(){
    return{
      category:[],
      photos:[],
      id:0
    }
  },
  created(){
    this.getCategory();
    this.getPhotoByCategory(0);
  },
  methods:{
    async getCategory() {
      const { data } = await this.$http.get("/api/getimgcategory");
      if (data.status == 0) {
        this.category = data.message;
        this.category.unshift({title:"全部",id:0});
      }
    },
    async getPhotoByCategory(id) {
      const { data } = await this.$http.get("/api/getimages/" + id);
      if (data.status == 0) {
        this.photos = data.message;
      }
    },
  },
  //在此钩子函数执行的时候，才可以进行控件或插件的初始化
  mounted(){
    mui('.mui-scroll-wrapper').scroll({
      deceleration:0.0005//flick减速系数，系数越大滚动越慢滚动距离越小
    });
  }
}
</script>

<style lang="scss" scoped>
.mui-slider{
  touch-action: pan-x; //单指水平滑动效果
}

.lazyul{
  margin: 0;
  padding: 10px;
  li{
    position: relative;
    text-align: center;
    background-color:#000;
    box-shadow: 0 0 7px grey;
    &+li{ //这种写法表示li后面的li应用样式
      margin-top: 10px;
    }
    img{
      vertical-align: middle;
      width: 100%;
    }
    img[lazy=loading]{
      width: 40px;
      height: 300px;
      margin: auto;
    }
  }
}

.info{
  position: absolute;
  bottom: 0;
  background-color:rgba($color: #000000, $alpha: 0.5);
  color: #fff;
  max-height: 86px;
  overflow: hidden;
  .info-title{
    font-size: 14px;
  }
  .info-content{
    font-size: 13px;
    text-align: left;
    text-indent: 2em;
  }
}


</style>